<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>视频直播</title>
 <style>
  video {
   width: 300px;
   height: 300px;
  }
  #video {
   display: none;
  }
  .parent {
   position: relative;
  }
  .parent #recordButton,#recordButton {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 100px;
   transform: translate(0%, -50%);
  }
  .between{
   display: flex;
   justify-content: space-between;
  }
 </style>
</head>

<body>
 <!-- <video src="../public/WIN_20230705_22_45_31_Pro.mp4" height="350" width="400" autoplay></video> -->
 <video src="http://localhost:8000/static/video/WIN_20230705_22_45_31_Pro.mp4" height="350" width="400" autoplay
  controls id="video"></video>
 <br />
 <div class="between">
  <div class="parent">
   <div>用户录制直播</div>
   <video height="350" width="400" autoplay controls id="liveStream">
    <source  type="application/x-mpegURL">
    <!-- src="http://example.com/path/to/your/stream.m3u8" -->
     <!-- 您的浏览器不支持HTML5视频。 -->
   </video>
   <button id="recordButton">开始录制</button>
   <button id="stopButton">停止录制</button>
   <button id="closeButton">关闭直播</button> <!-- 添加关闭直播按钮 -->
  </div>
  <div class="parent">
   <div>用户获取直播视频</div>
   <video src="../public/video/test1.mp4" height="350" width="400"  autoplay id="broat">
    <source src="" type="application/x-mpegURL">
   </video>
   <button id="recordButton">查看直播</button>
  </div>
 </div>
 <script src="./js/adapter-latest.js"></script>
 <script src="./js/testVideo.js"></script>
 <script src="./js/video.js"></script>
 <script>
 
 </script>
</body>

</html>